<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
<head>

<link rel="stylesheet" type="text/css" media="screen" href="styles/grid/css/ui-lightness/jquery-ui-1.8.17.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="styles/grid/css/ui.jqgrid.css" />
<link rel="stylesheet" href="styles/popup/general.css" type="text/css" media="screen" />
<script src="styles/grid/js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="styles/grid/js/i18n/grid.locale-es.js" type="text/javascript"></script>
<script src="styles/grid/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="styles/grid/js/i18n/grid.locale-es.js" type="text/javascript"></script>
<script src="styles/grid/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="styles/popup/popup.js" type="text/javascript"></script>
<script type="text/javascript" src="styles/support/indec.js"></script>

<style type="text/css">
	.ui-jqgrid tr.jqgrow td {font-size:0.8em}
	
	.ui-pg-table {font-size:1em}
	.ui-jqgrid-titlebar-close {display: none;}
	
	#jqgh_list_cuit {height: 25px;}
	#jqgh_list_campaign {height: 25px;}
	#jqgh_list_status {height: 25px;}
	#jqgh_list_download {height: 25px;}
	#jqgh_list_upload {height: 25px;}
	.editable {width:200px;}
</style>

<script type="text/javascript">
	//var rowsToColor = [];
	var lastSel = 0;
	function load() {
		jQuery("#list").jqGrid(
				{					
					width : '1500',					
					height: '500',					
					url : '<%=request.getContextPath()%>/getJsonGrid?gridName=GET_VE',
					editurl : '<%=request.getContextPath()%>/saveGrid?gridName=GET_VE',
					datatype : "json",
					colNames : [ '','ID', 'Tipo','Local','Formulario','Código','Validacion','','Motivo','Observaciones',''],
					colModel : [{
						name : 'image',
						index : 'image',
						width : 20,
						sortable: false,
						search: false,
						align: "center"
					}, {
						name : 'typeID',
						index : 'typeID',
						width : 100,
						sortable: false,
						search: false,
						hidden: true,
						align: 'center'
					}, {
						name : 'type',
						index : 'type',
						width : 100,
						sortable: true
					}, {
						name : 'local',
						index : 'local',
						width : 150,
						sortable: true,
						search: true,
						align: "left"
					}, {
						name : 'form',
						index : 'form',
						width : 150,
						sortable: true,
						search: true,
						align: "left"
					}, {
						name : 'code',
						index : 'code',
						width : 80,
						sortable: true,
						search: true,
						align: "center"
					}, {
						name : 'validation',
						index : 'validation',
						width : 300,
						sortable: true,
						search: true,
						align: "left"
					}, {
						name : 'validationID',
						index : 'validationID',
						width : 0,
						hidden: true,
						sortable: false,
						search: false,
						align: "center"
					},{
						name : 'reason',
						index : 'reason',
						width : 200,
						sortable: true,
						align: 'left',
						editable: true,
						edittype:'select', 
						editoptions:{dataUrl:'<%=request.getContextPath()%>/getJsonGrid?gridName=GET_VO&validationID=1020'}
					},{
						name : 'observation',
						index : 'observation',
						width : 200,
						sortable: true,
						align: 'center',
						editable: true,
						edittype:'textarea', 
						editoptions:{rows:"2",cols:"30"}
					}, {
						name : 'params',
						index : 'params',
						width : 0,
						sortable: true,
						search: false,
						hidden: true
					} ],
					rowNum : 10,
					rowList : [ 10, 20, 30],
					imgpath : "includes/css/ui-lightness/images",
					pager : jQuery("#pager"),
					sortable : true,
					loadonce : true,
					viewrecords : true,
					caption : " ", 
					onSelectRow: function(id){ 
						if(id){
							jQuery('#list').restoreRow(lastSel);
				         	lastSel=id;
				         	jQuery("#saveBtn,#cancelBtn").attr("disabled",true);
							jQuery("#openFormBtn").attr("disabled",false);
							jQuery("#addObsBtn").attr("disabled",true);
							var selectedRow = jQuery("#list").jqGrid('getGridParam','selrow');
							if(selectedRow != null)
							{
								var rowData = jQuery("#list").jqGrid('getRowData',selectedRow);
								if(rowData.typeID == 1)
								{
									jQuery("#addObsBtn").attr("disabled",false);
								}					
							}
						}
				   }
					//gridComplete: function () {
		            //    for (var i = 0; i < rowsToColor.length; i++) {
		            //        var status = $("#" + rowsToColor[i]).find("td").eq(1).html();
		            //        if (status == 1) {
		            //            $("#" + rowsToColor[i]).find("td").css("background-color", "#FDFF9E");
		            //        }
		            //        else if (status == 2) {
		            //        	$("#" + rowsToColor[i]).find("td").css("background-color", "#FF0000");
		            //        }
		            //    }
		            // }
				}).navGrid('#pager', {
			edit : false,
			add : false,
			del : false, 
			search:true,
			beforeRefresh: function()
			{
				jQuery("#list").jqGrid('setGridParam',{datatype:'json'}).trigger('reloadGrid');
			}
		});
		jQuery("#addObsBtn").click( function() {
			var selectedRow = jQuery("#list").jqGrid('getGridParam','selrow');
			if(selectedRow != null)
			{
				var rowData = jQuery("#list").jqGrid('getRowData',selectedRow);
				if(rowData.typeID == 1)
				{	
					jQuery("#list").jqGrid('setColProp','reason',{editoptions:{dataUrl:'getJsonGrid?gridName=GET_VO&validationID='+ rowData.validationID}});
					jQuery("#list").jqGrid('editRow',selectedRow);
					this.disabled = 'true';
					jQuery("#saveBtn,#cancelBtn").attr("disabled",false);
				}					
			}
		});
		jQuery("#saveBtn").click( function() {
			var selectedRow = jQuery("#list").jqGrid('getGridParam','selrow');
			if(selectedRow != null)
			{
				jQuery("#list").jqGrid('saveRow',selectedRow);
				jQuery("#saveBtn,#cancelBtn").attr("disabled",true);
				jQuery("#addObsBtn").attr("disabled",false);
			}			
		});
		jQuery("#cancelBtn").click( function() {
			var selectedRow = jQuery("#list").jqGrid('getGridParam','selrow');
			if(selectedRow != null)
			{
				jQuery("#list").jqGrid('restoreRow',selectedRow);
				jQuery("#saveBtn,#cancelBtn").attr("disabled",true);
				jQuery("#addObsBtn").attr("disabled",false);
			}
		});
		jQuery("#openFormBtn").click( function() {
			var selRow = jQuery("#list").jqGrid('getGridParam','selrow');
			var rowData = jQuery("#list").getRowData(selRow);
			var params = rowData["params"];
			if(selRow != null)
			{
				window.open('./getPollValues?params=' + params,'sommaire');
			}
		});
	}
	//function rowColorFormatter(cellValue, options, rowObject) {
    //    if (cellValue == 1  || cellValue == 2)
    //        rowsToColor[rowsToColor.length] = options.rowId;
    //    return cellValue;
    //}    
</script>
</head>
<body onload="javascript:load()" >
	<h1 style="padding-left: 20px;padding-top: 10px; margin: auto">Validaciones de Encuestas</h1>
	<div style="padding-left: 20px;padding-top: 20px; margin: auto">
		<table id="list" class="scroll"></table>
		<div id="pager" class="scroll" style="text-align:center;"></div>
		<br />
		<input type="button" id="printBtn" value="Imprimir" onclick="window.print();" class="fg-button ui-state-default ui-corner-all"/>
		<input type="button" id="openFormBtn" disabled="disabled" value="Abrir Formulario" class="fg-button ui-state-default ui-corner-all"/>
		<input type="button" id="addObsBtn" disabled="disabled" value="Justificar Advertencia" class="fg-button ui-state-default ui-corner-all"/>
		<input type="button" id="saveBtn" disabled="disabled" value="Guardar" class="fg-button ui-state-default ui-corner-all"/>
		<input type="button" id="cancelBtn" disabled="disabled" value="Cancelar" class="fg-button ui-state-default ui-corner-all"/>
	</div>
	<div id='prt-container' class='hide'>
	</div>
</body>
</html>